<template>
  <div class="global-common-list-tabs-template-container">
    <div :class="['tabs-container', $slots.tabs ? 'slot-style' : '']">
      <slot name="tabs"></slot>
    </div>
    <div :class="['tabs-content', $slots.tabs ? 'slot-content-style' : '']">
      <slot name="content"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "CommonListTabs",
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.global-common-list-tabs-template-container {
  background-color: #fff;
  position: relative;

  .tabs-container {
    padding: 0 18px;
    // height: 40px;
  }
  .slot-style {
    height: 40px;
  }

  .tabs-content {
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    /*overflow-y: scroll;*/
    overflow: hidden;
  }
  .slot-content-style {
    height: calc(100% - 40px);
  }
}
</style>
